<template>
  <div>
    <!-- 头部 -->
    <div class="headed">
      <div>
        <i class="iconfont icon-left zuo" @click="$router.push('/classifySon')"></i>
      </div>
      <h3></h3>
      <div>
        <i class="iconfont icon-ellipsis dian"></i>
      </div>
    </div>
    <!-- 广告提示 -->
    <div class="advertising">
      <img src="../assets/jinzai.png" alt />
    </div>
    <!-- 图片轮播 -->
    <div class="LB">
      <van-swipe :autoplay="3000" indicator-color="#ec4b6a">
        <van-swipe-item>
          <img src="../assets/tupian3.jpg" alt />
        </van-swipe-item>
        <van-swipe-item>
          <img src="../assets/tupian1.jpg" alt />
        </van-swipe-item>
        <van-swipe-item>
          <img src="../assets/tupian2.jpg" alt />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 详情 -->
    <div class="details">
      <!-- 满折 -->
      <div class="xiadan">
        <div class="mz-txts">
          <div class="mz-center">
            <span>[满折]</span>下单立享8.5折
          </div>
          <div class="trigle"></div>
        </div>
      </div>
      <!-- 闪购 -->
      <div class="sg-txts">
        闪购
        （每单限购：20件）
        <div class="time">
          剩余时间：9天
          07:24:54
          <div class="trigle trigles"></div>
        </div>
      </div>
      <!-- 价位 -->
      <div class="Spread">
        <div class="consult">
          <div>
            ￥
            <span>435.00</span>
          </div>
          <div>参考价￥580.00</div>
          <div>闪购</div>
        </div>
        <div>
          税费：商品价格已含税
          <img src="../assets/tanhao.png" alt />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import time from "../js/index.js";
export default {
  data() {
    return {
      times: "",
      timee: "",
      tim: ""
    };
  },
  mounted() {},
  methods: {}
};
</script>

<style>
.time {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sg-txts {
  position: relative;
  background: #fff4f4;
  color: #ff6f6f;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.2rem;
  height: 0.7rem;
  font-size: 0.2rem;
}
.trigle {
  width: 0;
  height: 0;
  border: 0.08rem solid;
  border-color: transparent transparent transparent #fff;
  margin-left: 0.1rem;
  position: absolute;
  right: 0.2rem;
  top: 40%;
}
.trigles {
  border-color: transparent transparent transparent #ff6f6f;
  position: relative;
  right: 0;
}
.mz-center span {
  padding-right: 0.2rem;
}
.mz-center {
  padding-bottom: 0.1rem;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 95%;
  font-size: 0.2rem;
}
.mz-txts {
  padding: 0.18rem 0 0.08rem;
}
.xiadan {
  z-index: 999;
  background-color: #ff6f6f;
  font-size: 0.24rem;
  color: #fff;
  padding: 0 0.2rem;
  position: relative;
  box-shadow: 0 2px 14px 0 #e78e8e;
}
.advertising {
  padding-top: 0.7rem;
}
.advertising img {
  width: 100%;
}
.LB img {
  width: 100%;
}
.dian {
  color: #999;
  font-size: 0.5rem;
  font-weight: bold;
}
.zuo {
  color: #999;
  font-size: 0.35rem;
}
.headed {
  display: flex;
  justify-content: space-between;
  padding: 0.1rem 0.15rem;
  border-bottom: 1px solid #ddd;
  align-items: center;
  position: fixed;
  width: 95.5%;
  z-index: 999;
  background: #fff;
}
.headed h3 {
  width: 80%;
  margin: 0;
  padding: 0;
}
</style>